import React from 'react';
import { Form, Input, Button, Row, Col, Spin } from 'antd';
import LoginService from '../../services/LoginService';


const randomNum = () => {
    return parseInt((Math.random() * 10000000).toString());
};

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};

const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

class Login extends React.Component{

    state = {
        loading: true,
        verifyId: randomNum(),
        captchaLoading: true
    };

    onFinish = async (values) => {
        const { verifyId } = this.state;
        const params = {...values, verifyId: verifyId}
        // console.log(params)
        await LoginService.login(params)
        // console.log(store.getState())
    }

    onFinishFailed(errorInfo) {
        console.log(errorInfo)
    }

    async componentDidMount() {
        let res = await LoginService.loadLoginInfo();
        if(!res) {
            this.setState({loading: false})
        }
    }

    render() {
        const {loading} = this.state;
        if(loading) {
            return <div className='spin-content'><Spin size='large' /></div>
        }
        return(
                <Row>
                    <Col offset={8} span={8} style={{marginTop: 100}}>
                        <Form
                            {...layout}
                            name="basic"
                            onFinish={this.onFinish}
                            onFinishFailed={this.onFinishFailed}
                        >
                            <Form.Item
                                label="Username"
                                name="username"
                                rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                                ]}
                            >
                                <Input placeholder="username" />
                            </Form.Item>

                            <Form.Item
                                label="Password"
                                name="password"
                                rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                                ]}
                            >
                                <Input.Password autoComplete = {''} />
                            </Form.Item>

                            <Form.Item {...tailLayout}>
                                <Button type="primary" htmlType="submit">
                                Submit
                                </Button>
                            </Form.Item>
                        </Form>
                    </Col>
                </Row>
        )
    }
}

export default Login